<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <ul>
    <li>link1</li>
    <li>link2</li>
    <li>link3</li>
    <li>link4</li>
    <li>link5</li>
    <li>link6</li>
    <li>link7</li>
  </ul>
</body>
<script>

  // 事件委托的封装
  // box.onclick = eventProxy(child, function(){})
  // function eventProxy(child, cb){
  //   return function(event){
  //     console.log(event);
  //     console.log(child, cb);
  //   }
  // }


  // 在函数将来执行时，拿到自身定义作用域内的数据

  // 循环内绑定事件，事件处理函数内获取循环每次的计数器

  // const li = document.querySelectorAll("li");

  // for(var i=0; i<li.length; i++){
  //   ;(function(i){
  //     li[i].onclick = function(){
  //       console.log(i);
  //     }
  //   })(i);
  // }

  // for(var i=0; i<li.length; i++){
  //   li[i].onclick = (function(i){
  //     return function(){
  //       console.log(i);
  //     }
  //   })(i);
  // }

  // for(let i=0; i<li.length; i++){
  //   li[i].onclick = function(){
  //     console.log(i);
  //   }
  // }

  // [...li].forEach((val,idx)=>{
  //   val.onclick = function(){
  //     console.log(idx);
  //   }
  // })

  
  // 在一个作用域内返回另一个作用域（作用域嵌套）
</script>
</html>